import {h, init} from "snabbdom"
// 导入模块
import style from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
import attributes from "snabbdom/modules/attributes"

// 电影列表
import movies from "./movies.js"
let moviesList = [...movies]
// 标题栏
const moviesTitles = ["Rank", "Title", "Description"]

let patch = init([
    style,
    eventlisteners,
    attributes
])
// 挂载的根元素
const app = document.querySelector("#app")


let vnode = createApp()
// 创建初始节点
function createApp () {
    return h("div.container", {
        style: { 
            color: '#FFFFDD', 
            padding: "20px",
            backgroundColor: '#181A1B'
        }
    }, [
        // 标题
        h("h1", "Top 10 movies"),
        // 表头
        h("div.table-title", [
            h("span", "Sort by: "),
            ...createMoviesTitle(moviesTitles),
            h("button", {
                style: {
                    width: "100px",
                    height: "30px",
                    border: "none",
                    position: "absolute",
                    right: "0",
                    top: "15px",
                    cursor: "pointer",
                },
                on: {
                    // 新增
                    click() {
                        const number = moviesList.length + 1
                        moviesList.unshift({
                            rank: number,
                            title: "复仇者联盟" + number,
                            description: "666666666666"
                        })
                        contrast()
                    }
                }
            }, "添加")
        ]),
        // 电影列表
        h("ul.movies-list", createMoviesList(moviesList))
    ])
}

// 创建列表表头
function createMoviesTitle(list) {
    return list.map(item => {
        return h("span", {
            style: {
                color: "#839597"
            },
            on: { 
                click: function () {
                    const elm = this.elm.innerHTML
                    // 根据排名排序
                    if(elm === "Rank") {
                        moviesList = moviesList.sort(moviesSort("rank"))
                        console.log("moviesList", moviesList)
                    }
                    contrast()
                }
            }
        }, item)
    })
}
// 电影列表按照rank排序
function moviesSort (key) {
    return function(value1,value2){
        const val1 = value1[key];
        const val2 = value2[key];
        return val1 - val2;
    }
}

// 创建电影列表
function createMoviesList(list) {
    return list.map(item => {
        return h("li.movies-item", {
            style: {
                position: "relative"
            }
        }, [
            h("div", item.rank),
            h("div", item.title),
            h("div", item.description),
            h("div", {
                // 设置当前数据的下标标记
                rank: item.rank,
                style: {
                    position: "absolute",
                    right: "0",
                    top: "0",
                    width: "40px",
                    height: "40px",
                    cursor: "pointer",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center"
                },
                on: {
                    // 删除节点
                    click() {
                        // 通过之前设置的标记删除指定的元素
                        const rank = this.data.rank
                        moviesList = moviesList.filter(item => item.rank !== rank)
                        // 更新
                        contrast()
                    }
                }
            }, "X")
        ])
    })
}

function contrast() {
    const newNode = createApp()
    patch(vnode, newNode)
    // 替换旧节点
    vnode = newNode
}

// 初始化渲染创建列表
patch(app, vnode)
